<template>
 <el-card class="box-card">
    <template #header>
      <el-form
        ref="ruleFormRef"
        label-width="80px"
        class="demo-ruleForm"
        status-icon
      >
      <el-row :gutter="20">
        <el-col :span="8">
          <el-form-item label="关键字" prop="name">
      <el-input  placeholder="根据编号搜索" v-model="keyword"/>
          </el-form-item>
        </el-col>
        <el-col :span="16">
          <el-row type="flex" justify="end">
            <el-button @click="onClear">清除</el-button>
            <el-button type="primary" @click="onSearch">搜索</el-button>
          </el-row>
        </el-col>
      </el-row>
  </el-form>
  <el-alert type="info" show-icon :title="`数据一共${page.total}条`"></el-alert>
    </template>
    <el-table :data="list" style="width: 100%">
    <el-table-column prop="id" label="编号" width="200" />
    <el-table-column prop="name" label="题型" width="90">
      <template v-slot="scope">
        <span>{{$filters.formatDifficulty(scope.row.questionType*1)}}</span>
      </template>
    </el-table-column>
    <el-table-column label="题目编号" width="230">
      <template v-slot="scope">
        <p
          v-for="(item,index) in scope.row.questionIDs"
          :key="index"
          style="cursor: pointer; color:rgb(0, 153, 255)"
          @click="onPreview(item)"
        >
        {{item.number}}</p>
      </template>
    </el-table-column>
    <el-table-column prop="addTime" label="录入时间" width="200" />
    <el-table-column prop="totalSeconds" label="答题时间(s)" />
    <el-table-column prop="accuracyRate" label="正确率(%)" width="120"/>
    <el-table-column prop="userName" label="录入人" width="120" />
    <el-table-column label="操作" width="90">
      <template v-slot="{row}">
        <el-button :icon="Delete" circle color="#f56c6c" :dark="isDark" plain  @click="onDel(row)"/>
      </template>
    </el-table-column>
  </el-table>
  <el-row type="flex" justify="end">
    <el-pagination
      v-model:currentPage="page.page"
      v-model:page-size="page.pagesize"
      :page-sizes="[20, 30, 50, 100]"
      layout="prev, pager, next,sizes,jumper"
      :total="page.total"
      background
      @size-change="handleSizeChange"
      @current-change="currentPageChange"
    />
  </el-row>
    <QuestionGroups ref="QuestionGroupsRef" @close="onClose" :data="preview"></QuestionGroups>
  </el-card>
</template>

<script>
import { Delete } from '@element-plus/icons-vue'
import { detail, randoms, removeRandoms } from '@/api/hmmm/questions'
import { nextTick, onMounted, reactive, ref } from 'vue'
import { ElMessage, ElMessageBox } from 'element-plus'
import QuestionGroups from './components/questionGroups.vue'

export default {
  name: 'QuestionsRandoms',
  components: { QuestionGroups },
  setup () {
    // 分页信息
    const page = reactive({
      page: 1,
      pagesize: 20,
      total: null
    })
    const keyword = ref('')
    const list = ref([])
    // 获取列表
    async function getList () {
      const { data } = await randoms({
        ...page,
        keyword: keyword.value
      })
      // console.log('res', data)
      list.value = data.items
      page.total = data.counts
    }
    // 分页器功能
    function currentPageChange (val) {
      page.page = val
      getList()
    }
    function handleSizeChange (val) {
      page.pagesize = val
      getList()
    }
    // 更改表格样式
    function onRowStyle () {
      return 'color:blue;cursor:pointer;'
    }
    // 删除功能
    function onDel ({ id }) {
      ElMessageBox.confirm('确认删除？', '提示', {
        confirmButtonText: '确认',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        // 发送请求
        removeRandoms({ id }).then(() => {
          // 成功提示
          ElMessage.success('删除成功！')
          getList()
        })
      }).catch(() => {
        ElMessage.error('操作失败')
      })
    }
    // 搜索功能
    function onSearch () {
      page.page = 1
      getList()
    }
    // 清除功能
    function onClear () {
      keyword.value = ''
      onSearch()
    }
    // 预览功能
    const QuestionGroupsRef = ref(null)
    const preview = ref(null)
    async function onPreview ({ id }) {
      const { data } = await detail({ id })
      preview.value = data
      QuestionGroupsRef.value.showDialog = true
    }
    // 关闭功能
    function onClose () {
      QuestionGroupsRef.value.showDialog = false
    }
    onMounted(() => {
      getList()
    })
    return { page, list, Delete, currentPageChange, handleSizeChange, onRowStyle, onDel, keyword, onSearch, onClear, onPreview, QuestionGroupsRef, onClose, preview }
  }
}
</script>

<style scoped>
.el-card{
  padding: 20px;
  margin: 20px 10px 0 10px;
}
.el-alert.is-light :deep(.el-alert__close-btn){
  display: none;
}
.el-pagination .el-select .el-input{
  width: 100px !important;
  margin-left: 5px;
}
</style>
